<template>
  <div>
    <MyTable :arr="list">
<template #title>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
</template>

<template #body="scope">
        <td>{{scope.row.id}}</td>
        <td>{{scope.row.goods_name}}</td>
        <td>{{scope.row.goods_price}}</td>
        <td>
          <!-- <input
          class="tag-input form-control"
          style="width: 100px;"
          type="text"
          v-if="scope.row.inputVisible"

          @blur="scope.row.inputVisible = false"

          @keydown.enter="enterFn(scope.row)"
          />
          <button 
          v-else 
          style="display: block;" 
          class="btn btn-primary btn-sm add-tag"
          @click="scope.row.inputVisible = true"
          >+Tag</button> -->
    <span v-for="(item,index) in scope.row.tags" :key="index" 
         >
        
         
         {{item}}
        
        </span></td>
        <td>
          <button class='btn btn-danger btn-sm' @click="btnDel(scope.row.id)">删除</button>
        </td> 
</template>
    </MyTable>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "https://www.escook.cn";
import MyTable from '../components/MyTable.vue';
export default {
components:{
  MyTable,
},
data(){
  return{
    list:[],
    delId:0
  }
},
created(){
  axios({
  method:'get',
  url:'/api/goods'
}).then(res=>{
  this.list=res.data.data

})
},
methods:{
  btnDel(id){
const index=this.list.findIndex(item=>item.id===id)
this.list.splice(index,1)
  }
},
}
</script>

<style>
</style>